<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>订单01</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script>
    <!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <style>
        /*.qian{
            width:1000px;
            height:50px;
            margin-left:260px;
            text-align:center;
            font-size:40px;
            font-famaliy:"隶书";
            border:1px solid red;
            color: #999;
        }*/
        .page1{
            float:left;
            margin-left: 70px;

        }
    </style>
    <script>
        //回调函数入口
        //showLogs();
        $(function () {
            findByLike(1);
            $("#nextpage").click(function () {
                var currentpage = parseInt($("#currentpage").html());
                var totalpage = parseInt($("#totalpage").html());
                if (currentpage < totalpage) {
                    findByLike(currentpage + 1);
                }
            });
            $("#perpage").click(function () {
                var currentpage = parseInt($("#currentpage").html());
                var totalpage = parseInt($("#totalpage").html());
                if (currentpage > 1) {
                    findByLike(currentpage - 1);
                }
            });
            $("#firstpage").click(function () {
                var currentpage = parseInt($("#currentpage").html());
                var totalpage = parseInt($("#totalpage").html())
                findByLike(1);
            });
            $("#lastpage").click(function () {
                var currentpage = parseInt($("#currentpage").html());
                var totalpage = parseInt($("#totalpage").html())
                findByLike(totalpage);
            });
        })

        //展示所有日志
        function showLogs(ppage) {
            $.ajax({
                url: "/web-util/log/alls",
                type: "get",
                data: {
                    page: ppage
                },
                success: function (data) {
                    $("#currentpage").html(ppage);
                    $("#totalpage").html(data.pages);
                    var content = "";
                    for (var i = 0; i < data.list.length; i++) {
                        //var user = data[i].operator;
                        content += "<tr>" +
                            "<td>" + data.list[i].account + "</td>" +
                            "<td>" + data.list[i].operation_time + "</td>" +
                            "<td>" + data.list[i].module + "</td>" +
                            "<td>" + data.list[i].operation_description + "</td>" +
                            "<td>" + data.list[i].response + "</td>" +
                            "<td>" + data.list[i].ip + "</td>" +
                            "<td>" + data.list[i].result + "</td>" +
                            "</tr>"
                    }
                    $("#log").html(content);
                    console.log(content);
                }
            })
        }

        function findByLike(ppage) {
            $.ajax({
                url: "/web-util/log/byLike",
                type: "get",
                data: {
                    page: ppage,
                    account: $("#account").val(),
                    startTime: $("#startTime").val(),
                    endTime: $("#endTime").val()
                },
                dataType: "json",
                success: function (data) {
                    $("#currentpage").html(ppage);
                    $("#totalpage").html(data.pages);
                    console.log(data);
                    var content = "";
                    for (var i = 0; i < data.list.length; i++) {
                        content += "<tr>" +
                            "<td>" + data.list[i].account + "</td>" +
                            "<td>" + data.list[i].operation_time + "</td>" +
                            "<td>" + data.list[i].module + "</td>" +
                            "<td>" + data.list[i].operation_description + "</td>" +
                            "<td>" + data.list[i].response + "</td>" +
                            "<td>" + data.list[i].ip + "</td>" +
                            "<td>" + data.list[i].result + "</td>" +
                            "</tr>"
                    }
                    $("#log").html(content);
                }
            })
        }

    </script>

</head>

<body>
<br/>
<br/>
<div class="demoTable">
    操作人员姓名：
    <span class="layui-inline">
				<input class="layui-input" name="id" id="account" autocomplete="off">
			</span>
    起始时间：
    <div class="layui-inline">
        <!-- 注意：这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="startTime">
    </div>
    结束时间：
    <div class="layui-inline">
        <!-- 注意：这一层元素并不是必须的 -->
        <input type="text" class="layui-input" id="endTime">
    </div>
    <button class="layui-btn" data-type="reload" id="find" onclick="findByLike('1')">搜索</button>
</div>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#startTime' //指定元素
        });
        laydate.render({
            elem: '#endTime' //指定元素
        });

    });
</script>


<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="600">
            <col width="400">
            <col width="300">
            <col width="300">
            <col width="200">
            <col width="400">
            <col>
        </colgroup>

        <thead>
        <tr>
            <th>操作人</th>
            <th>操作时间</th>
            <th>操作模块</th>
            <th>操作描述</th>
            <th>响应时间（ms）</th>
            <th>IP地址</th>
            <th>操作结果</th>

        </tr>
        </thead>
        <tbody id="log">
        <!--<tr>
            <td>贤心</td>
            <td>1989-10-14</td>
            <td>登录系统</td>
        </tr>-->
        </tbody>
    </table>
</div>
<div class="qian">
    <div class="page1" id="firstpage">首页</div>
    <div class="page1" id="perpage">前一页</div>
    <div class="page1"><span id="currentpage">1</span>/<span id="totalpage">2</span></div>
    <div class="page1" id="nextpage">后一页</div>
    <div class="page1" id="lastpage">尾页</div>
</div>
</body>
</html>
